<template>
  <div class="wrap">
    <div class="title">
      <em class="look activTitle" @click="eidtorOrDele">{{
        isEidtor == 0 ? "编辑" : "取消"
      }}</em>
      <!-- <em class="bestNew">最新</em> -->
    </div>
    <div class="container">
      <div v-for="(item, index) in userPublishList" :key="index">
        <div class="left" v-if="index % 2 == 0">
          <div class="item" @click="jumpForumInfo(item.id)">
            <img :src="$imgUrl + item.imageUrl[0]" alt="" class="forunmImg" />
            <img src="@/assets/circle.png" alt="" class="circle" v-if="isEidtor == 1&&!item.check" />
            <img
              src="@/assets/circle2.png"
              alt=""
              class="circle"
              v-if="isEidtor == 1&&item.check"
            />
            <div class="forumUserList">
              <div class="forumTitle">
                {{ item.userPublishList }}
              </div>
              <div class="forumBottom">
                <div class="forumLeft">
                  <img :src="$imgUrl+item.headImage" alt="" class="userHead" />
                  <em class="userName">{{ item.nickName }}</em>
                </div>
                <div class="forumRight">
                  <img src="@/assets/redHeart.png" alt="" class="redHeart" />
                  <img
                    src="@/assets/greyHeart.png"
                    alt=""
                    class="redHeart"
                    style="display: none"
                  />
                  <em class="loveNumber">{{ item.likeNum }}</em>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="right" v-else>
          <div class="item" @click="jumpForumInfo(item.id)">
            <img :src="$imgUrl + item.imageUrl[0]" alt="" class="forunmImg" />
            <!-- itemPlatForm -->
            <!-- <em class="platformDele">平台删除</em> -->
            <img
              src="@/assets/circle.png"
              alt=""
              class="circle"
              v-if="isEidtor == 1&&!item.check"
            />
            <img src="@/assets/circle2.png" alt="" class="circle" v-if="isEidtor == 1&&item.check" />
            <div class="forumUserList">
              <div class="forumTitle">
                {{ item.userPublishList }}
              </div>
              <div class="forumBottom">
                <div class="forumLeft">
                  <img :src="$imgUrl+item.headImage" alt="" class="userHead" />
                  <em class="userName">{{ item.nickName }}</em>
                </div>
                <div class="forumRight">
                  <img src="@/assets/redHeart.png" alt="" class="redHeart" />
                  <img
                    src="@/assets/greyHeart.png"
                    alt=""
                    class="redHeart"
                    style="display: none"
                  />
                  <em class="loveNumber">{{ item.likeNum }}</em>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sureBtn" v-if="isEidtor == 1" @click="deleForum">删除</div>
  </div>
</template>

<script>
import { Switch } from "vant";
import { apiUserPublishList,apiBatchDelete } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      isEidtor: 0, //0编辑，1取消编辑
      userPublishList: [],
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getUserPublishList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.noMore = false;
        this.getUserPublishList();
      }
    },
    //编辑、取消
    eidtorOrDele() {
      this.isEidtor == 0 ? (this.isEidtor = 1) : (this.isEidtor = 0);
    },
    //获取用户发帖列表
    getUserPublishList() {
      var page = (this.reqPageNum += 1);
      apiUserPublishList({
        id: JSON.parse(localStorage.getItem("loginInfo")).userId,
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        if (res.data.rows.length === 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        dataRes.map((item) => {
          item.check = false;
          item.imageUrl = item.imageUrl.split(",");
        });
        this.userPublishList.push(...dataRes);
        console.log("userPublishList", this.userPublishList);
      });
    },
    //跳转详情or勾选删除：
    jumpForumInfo(i) {
      if (this.isEidtor == 0) { //非勾选操作 点击item 则跳转到详情
        this.$router.push({
          path: "/pages/forumInfo",
          query: {
            //传递参数
            forumId: i,
          },
        });
      }else{ //勾选操作 点击item 将数组check==false状态变为true  
        this.userPublishList.map(item=>{
          if(item.id==i){
            item.check = !item.check
          }
        })
        console.log('勾选',this.userPublishList)
      }
    },
    //删除帖子——接口待修改，本页面只剩这最后一步了，根据列表数据check是否为true，收集对应的id，调用修改的api进行删除。
    deleForum(){
      var idsReq = []
      this.userPublishList.map(item=>{
          if(item.check){
            idsReq.push(item.id)
          }
        })
       apiBatchDelete({
        ids: idsReq
      }).then((res) => {
        if (res.code== 200) {
          this.$toast.success('删除成功!')
          this.reqPageNum = 0
          this.userPublishList = []
          this.getUserPublishList()
        }
      });
    }
  },
  created() {},
  components: {
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
.wrap {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  min-height: 100vh;
  border-radius: 20px 20px 0px 0px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  width: 93%;
  margin: 0px auto;
  padding: 15px 0px;
}
.look {
}

.bestNew {
  padding-left: 25;
}
.activTitle {
  color: #181818;
  font-weight: 600;
}
.container {
  width: 93%;
  margin: 0px auto;
}
.left {
  float: left;
  width: 49%;
}
.item {
  margin-bottom: 20px;
  position: relative;
}

.itemPlatForm {
  background-color: #181818;
  opacity: 0.3;
}

.platformDele {
  font-size: 16px;
  font-weight: 500;
  color: rgb(116, 113, 113);
  line-height: 30px;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 50px;
  font-weight: 600;
}

.forunmImg {
  width: 167px;
  height: auto;
  border-radius: 20px;
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 30px;
}

.forumUserList {
}

.forumTitle {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #181818;
  line-height: 18px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.forumBottom {
  display: flex;
  justify-content: space-between;
}
.forumLeft {
  display: flex;
}
.userHead {
  width: 19px;
  height: 19px;
  border-radius: 19px;
  align-items: center;
}
.userName {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  margin-left: 5px;
  margin-top: 2px;
}
.forumRight {
}
.redHeart {
  width: 13px;
  height: 11px;
}
.loveNumber {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
.right {
  width: 49%;
  float: right;
}
.sureBtn {
  width: 90%;
  position: fixed;
  left: 5%;
  bottom: 40px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
